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".
Vous pouvez retrouver mes réalisations web plus récentes sur la page principale des réalisations web.
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 :
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)
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 !
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)
Yem.ch (précédente version)
A tout seigneur tout honneur, j'ai enfin pu refondre le site de Yem informatique, là
où je travaille actuellement.
Cette refonte a été un peu atypique : le site ainsi que son graphisme avaient été faits à la va-vite, notamment via un logiciel WYSIWYG pour l'intégration et une optimisation toute relative côté graphisme. En a résulté un code source assez immonde, ainsi que divers bugs d'intégration (notamment sous Firefox), ainsi qu'un menu fait en flash complètement inaccessible.
Comme il était inacceptable que le site de ma propre boîte ne soit pas codé avec l'art et la manière, j'ai quelque peu refondu le graphisme et complètement réintégré le tout via XHTML/CSS, avec un petit peu de PHP au passage.
Au final, le site passe d'un menu Flash à un menu full-CSS utilisant les portes coulissantes afin de ne pas avoir de préchargement intempestif, les bugs d'affichage ont été solutionnés, le site a gagné en propreté de code et en accessibilité (ainsi qu'une page 404 et 403 au passage), les animations Flash restantes ont été intégrées de manière accessible (via la méthode Satay), et le site m'a permis d'expérimenter les pseudo-frames pour le contenu des pages.
Plus propre, plus léger donc plus rapide, plus beau, plus accessible, que demande le peuple ? ;-)
Cette refonte a été un peu atypique : le site ainsi que son graphisme avaient été faits à la va-vite, notamment via un logiciel WYSIWYG pour l'intégration et une optimisation toute relative côté graphisme. En a résulté un code source assez immonde, ainsi que divers bugs d'intégration (notamment sous Firefox), ainsi qu'un menu fait en flash complètement inaccessible.
Comme il était inacceptable que le site de ma propre boîte ne soit pas codé avec l'art et la manière, j'ai quelque peu refondu le graphisme et complètement réintégré le tout via XHTML/CSS, avec un petit peu de PHP au passage.
Au final, le site passe d'un menu Flash à un menu full-CSS utilisant les portes coulissantes afin de ne pas avoir de préchargement intempestif, les bugs d'affichage ont été solutionnés, le site a gagné en propreté de code et en accessibilité (ainsi qu'une page 404 et 403 au passage), les animations Flash restantes ont été intégrées de manière accessible (via la méthode Satay), et le site m'a permis d'expérimenter les pseudo-frames pour le contenu des pages.
Plus propre, plus léger donc plus rapide, plus beau, plus accessible, que demande le peuple ? ;-)
Ergologique
Ergologique est un site qui traite de tout ce qui concerne "l'ergonomie et
l'utilisabilité des interfaces web, et des interfaces utilisateur en général".
Ma participation à la refonte d'Ergologique s'est faite sur ce que l'on peut appeler "un coup de grogne" : l'ancienne version du site avait eu droit à un petit coup de pub par Tristan Nitot sur son célèbre Standblog, c'est là que j'ai découvert ce site, j'ai d'ailleurs trouvé ce dernier particulièrement intéressant (contenu pointu et de qualité).
Toutefois, quelques commentaires désagréables ont descendu Ergologique, juste sur le fait que son code source n'était pas valide, etc. (le site était conçu via des tableaux, à "l'ancienne méthode", ce qui n'enlevait rien à la qualité du contenu du site).
Ces commentaires m'ont un peu peu mis en rogne (la critique est facile... quand on ne fait rien), et j'ai proposé mon aide pour la refonte, qu'Emeric Thoa (le concepteur du site) a acceptée.
Mon rôle a été simple : créer un squelette XHTML/CSS en partant du graphisme de la nouvelle version qui m'a été fourni (la version actuelle), en essayant de respecter au mieux les envies d'Emeric (disposition, etc.).
Au final, grâce à l'énorme travail de l'équipe du site et plus particulièrement d'Emeric (refonte de tout le site, et il y avait de quoi faire !), Ergologique s'offre une belle cure de jouvence, cette nouvelle version est une vraie réussite : le site est beau, fonctionnel, léger, et le contenu est et reste de grande qualité.
Une adresse à retenir !
Ma participation à la refonte d'Ergologique s'est faite sur ce que l'on peut appeler "un coup de grogne" : l'ancienne version du site avait eu droit à un petit coup de pub par Tristan Nitot sur son célèbre Standblog, c'est là que j'ai découvert ce site, j'ai d'ailleurs trouvé ce dernier particulièrement intéressant (contenu pointu et de qualité).
Toutefois, quelques commentaires désagréables ont descendu Ergologique, juste sur le fait que son code source n'était pas valide, etc. (le site était conçu via des tableaux, à "l'ancienne méthode", ce qui n'enlevait rien à la qualité du contenu du site).
Ces commentaires m'ont un peu peu mis en rogne (la critique est facile... quand on ne fait rien), et j'ai proposé mon aide pour la refonte, qu'Emeric Thoa (le concepteur du site) a acceptée.
Mon rôle a été simple : créer un squelette XHTML/CSS en partant du graphisme de la nouvelle version qui m'a été fourni (la version actuelle), en essayant de respecter au mieux les envies d'Emeric (disposition, etc.).
Au final, grâce à l'énorme travail de l'équipe du site et plus particulièrement d'Emeric (refonte de tout le site, et il y avait de quoi faire !), Ergologique s'offre une belle cure de jouvence, cette nouvelle version est une vraie réussite : le site est beau, fonctionnel, léger, et le contenu est et reste de grande qualité.
Une adresse à retenir !
Fabiennemuller.ch
Fabienne Muller est une photographe qui travaille actuellement à Genève (en Suisse).
Ce site est realisé entièrement en PHP/XHTML/CSS, la principale contrainte était de faire un site très léger, avec peu de fioritures graphiques.
Le graphisme était imposé, je n'ai donc pas eu à le créer, seul comptaient la légèreté et la simplicité. Bien sûr, l'emploi massif de CSS a permis de réduire le poids des pages au strict minimum, c'est donc le poids des photographies qui font celui de la page, et non la page qui restreint le nombre de photos.
Quant au contenu, comme il est entièrement administrable et administré par le client, je n'ai pas eu à le créer !
Ce site est realisé entièrement en PHP/XHTML/CSS, la principale contrainte était de faire un site très léger, avec peu de fioritures graphiques.
Le graphisme était imposé, je n'ai donc pas eu à le créer, seul comptaient la légèreté et la simplicité. Bien sûr, l'emploi massif de CSS a permis de réduire le poids des pages au strict minimum, c'est donc le poids des photographies qui font celui de la page, et non la page qui restreint le nombre de photos.
Quant au contenu, comme il est entièrement administrable et administré par le client, je n'ai pas eu à le créer !
Le principal attrait de ce site est d'être intégralement pilotable via cette interface d'administration. Les photographies de chaque rubrique, les rubriques elles-mêmes,
les utilisateurs de cette interface, les factures et les frais, les clients, les liens etc... sont pilotables simplement via cette interface.
Les ajouts/modifications/suppressions de photos sont faits automatiquement (l'utilisateur de l'admin n'a pas à se soucier de savoir comment cela fonctionne), les factures se font rapidement, et sont imprimables directement en ligne, bref tout est fait pour une efficacité maximale.
A noter, cette interface d'administration est entièrement valide XHTML 1 Strict, et les CSS sont également valides !
Les ajouts/modifications/suppressions de photos sont faits automatiquement (l'utilisateur de l'admin n'a pas à se soucier de savoir comment cela fonctionne), les factures se font rapidement, et sont imprimables directement en ligne, bref tout est fait pour une efficacité maximale.
A noter, cette interface d'administration est entièrement valide XHTML 1 Strict, et les CSS sont également valides !
Porsche4you
Porsche4you est né de la passion de Gilles Perroud pour ces voitures mythiques.
Au départ, l'idée était "juste" d'avoir un forum, ainsi qu'un module de petites annonces. Comme les besoins étaient très clairs (un forum très simple), j'ai décidé de le programmer moi-même au lieu de reprendre quelque chose de déjà fait.
Comme l'idée de pouvoir intégralement gérer son site sans mettre les mains dans le code était séduisante, l'évidence est apparue : tout le site serait dynamique, chaque rubrique peut être mise à jour via une console d'administration.
Quant au graphisme, le style existant du site convenait parfaitement aux besoins, je n'ai eu qu'à continuer dans la même veine.
Au final, ce site est incontournable pour tout fan de Porsche, tant il est complet.
Ci-contre, voici 2 captures d'écran de l'interface du site (cliquez sur les images pour agrandir, le site n'est plus en ligne).
Au départ, l'idée était "juste" d'avoir un forum, ainsi qu'un module de petites annonces. Comme les besoins étaient très clairs (un forum très simple), j'ai décidé de le programmer moi-même au lieu de reprendre quelque chose de déjà fait.
Comme l'idée de pouvoir intégralement gérer son site sans mettre les mains dans le code était séduisante, l'évidence est apparue : tout le site serait dynamique, chaque rubrique peut être mise à jour via une console d'administration.
Quant au graphisme, le style existant du site convenait parfaitement aux besoins, je n'ai eu qu'à continuer dans la même veine.
Au final, ce site est incontournable pour tout fan de Porsche, tant il est complet.
Ci-contre, voici 2 captures d'écran de l'interface du site (cliquez sur les images pour agrandir, le site n'est plus en ligne).
Comme le site est intégralement dynamique (en PHP),
l'interface d'administration est en conséquence. Au menu, 17 rubriques permettent de "piloter" le site,
sans connaissances particulières requises.
Je ne vais pas détailler les 17 rubriques, jetez un oeil à cette capture d'écran (cliquez sur l'image pour l'agrandir).
Je ne vais pas détailler les 17 rubriques, jetez un oeil à cette capture d'écran (cliquez sur l'image pour l'agrandir).
Carvos (Teamquad 74)
Teamquad 74 est un concessionnaire de quads. Il était proprement impossible de naviguer sur leur précédent site (flash mal utilisé,
interface désuette). Les choix s'imposèrent d'eux-mêmes : il fallait un site accessible, avec un graphisme rappelant le
domaine (les quads), et surtout un site léger et rapide !
Le choix du XHTML couplé à des CSS devint immédiat, en mettant l'accent sur l'accessibilité (recommandations WCAG du W3C).
Le site s'adapte donc à la résolution du navigateur, et peut même être correctement vu par un navigateur en mode texte, comme Lynx. Il est généré via de l'ASP pour ce qui est des parties dynamiques.
Pour ce qui est du graphisme, la seule contrainte était de rester dans les tons rouges du logo et de faire "voir" les quads.
Ci-contre, voici 2 captures d'écran de l'interface du site (cliquez sur les images pour agrandir, le site a changé de version).
Le choix du XHTML couplé à des CSS devint immédiat, en mettant l'accent sur l'accessibilité (recommandations WCAG du W3C).
Le site s'adapte donc à la résolution du navigateur, et peut même être correctement vu par un navigateur en mode texte, comme Lynx. Il est généré via de l'ASP pour ce qui est des parties dynamiques.
Pour ce qui est du graphisme, la seule contrainte était de rester dans les tons rouges du logo et de faire "voir" les quads.
Ci-contre, voici 2 captures d'écran de l'interface du site (cliquez sur les images pour agrandir, le site a changé de version).
Un autre souci était de pouvoir facilement mettre à jour le site, pour ajouter les nouveaux modèles, mettre des
nouvelles, etc... bref pour faire vivre le site.
5 rubriques sont actualisables via une interface d'administration : les news, un petit encart sur la page d'accueil, les quads, les liens vers les partenaires, et les paramètres administrateur. Les images sont uploadées et supprimées automatiquement, l'utilisateur n'a pas à s'en soucier.
Ci-contre, une capture d'écran de l'interface d'administration du site (cliquez sur l'image pour agrandir).
5 rubriques sont actualisables via une interface d'administration : les news, un petit encart sur la page d'accueil, les quads, les liens vers les partenaires, et les paramètres administrateur. Les images sont uploadées et supprimées automatiquement, l'utilisateur n'a pas à s'en soucier.
Ci-contre, une capture d'écran de l'interface d'administration du site (cliquez sur l'image pour agrandir).
Compositec
Compositec est un laboratoire dans le domaine des matériaux composites (comme son nom l'indique, me direz-vous).
Ce projet est celui de ma 2ème année à l'IUT
SRC.
Cette fois, le but était de montrer une vitrine technologique de Compositec, via un site au look moderne et efficace.
Il est apparu très vite que ce projet serait assez "énorme", rien de moins qu'un site complet créé de A à Z, (du graphisme aux parties dynamiques du site et de l'administration, en passant par les photos, le tout en deux versions : une pour IE, et une pour less autres navigateurs), une lettre d'information créée par un de nos graphistes et une photothèque d'entreprise !
Le site "public" contient également deux parties à accès restreint : l'amicale des anciens et les adhérents, chacune ayant son graphisme propre.
Ce projet fut un des meilleurs auxquels j'ai participés, tant par le travail en lui-même, que par l'équipe de projet franchement sympathique.
Il m'a permis également de tester ma résistance au manque de sommeil (15H en 5 jours la dernière semaine !), car nous avons dû le réaliser sur notre temps libre, qui fut une denrée trop rare...
Ci-contre, voici 2 captures d'écran de l'interface du site (cliquez sur les images pour agrandir).
Cette fois, le but était de montrer une vitrine technologique de Compositec, via un site au look moderne et efficace.
Il est apparu très vite que ce projet serait assez "énorme", rien de moins qu'un site complet créé de A à Z, (du graphisme aux parties dynamiques du site et de l'administration, en passant par les photos, le tout en deux versions : une pour IE, et une pour less autres navigateurs), une lettre d'information créée par un de nos graphistes et une photothèque d'entreprise !
Le site "public" contient également deux parties à accès restreint : l'amicale des anciens et les adhérents, chacune ayant son graphisme propre.
Ce projet fut un des meilleurs auxquels j'ai participés, tant par le travail en lui-même, que par l'équipe de projet franchement sympathique.
Il m'a permis également de tester ma résistance au manque de sommeil (15H en 5 jours la dernière semaine !), car nous avons dû le réaliser sur notre temps libre, qui fut une denrée trop rare...
Ci-contre, voici 2 captures d'écran de l'interface du site (cliquez sur les images pour agrandir).
Il fallait pouvoir gérer simplement tout cela, donc le site contient beaucoup de parties dynamiques, gérées en
PHP.
Un exemple parmi d'autres, chaque adhérent de l'"Amicale des anciens" peut, s'il cherche un emploi consulter des petites annonces postées sur le site, et mettre son CV à disposition des partenaires de Compositec.
L'interface d'administration permet de gérer les inscriptions, les nouvelles, les lettres d'informations, etc...
Ci-contre, une capture d'écran (cliquez sur l'image pour agrandir, le site a changé de version).
Un exemple parmi d'autres, chaque adhérent de l'"Amicale des anciens" peut, s'il cherche un emploi consulter des petites annonces postées sur le site, et mettre son CV à disposition des partenaires de Compositec.
L'interface d'administration permet de gérer les inscriptions, les nouvelles, les lettres d'informations, etc...
Ci-contre, une capture d'écran (cliquez sur l'image pour agrandir, le site a changé de version).
Tomy puériculture
On ne présente plus les jouets TOMY : vous connaissez sans aucun doute le slogan "C'est bien trouvé, c'est bien TOMY !"
Ici, l'objectif était d'adapter le catalogue de la gamme puériculture de TOMY à travers ce site, tout en mettant en avant les Audi Baby (les écoutes-bébés), et en proposant un système de FAQ's pour aider les utilisateurs en cas de problèmes.
L'idée était d'avoir un site très simple à naviguer, accessible, et permettant un accès immédiat aux informations.
D'où la réalisation en XHTML couplé à une forte utilisation des CSS, lesquelles ont permis d'obtenir un site léger et surtout accessible.
Ci-contre, voici 2 captures d'écran de l'interface du site (cliquez sur les images pour agrandir, le site a changé de version).
Ici, l'objectif était d'adapter le catalogue de la gamme puériculture de TOMY à travers ce site, tout en mettant en avant les Audi Baby (les écoutes-bébés), et en proposant un système de FAQ's pour aider les utilisateurs en cas de problèmes.
L'idée était d'avoir un site très simple à naviguer, accessible, et permettant un accès immédiat aux informations.
D'où la réalisation en XHTML couplé à une forte utilisation des CSS, lesquelles ont permis d'obtenir un site léger et surtout accessible.
Ci-contre, voici 2 captures d'écran de l'interface du site (cliquez sur les images pour agrandir, le site a changé de version).
Une fois de plus, il fallait pouvoir facilement mettre à jour le site, pour ajouter les nouveaux produits, et compléter
les différentes FAQ's (le tout sans connaissances spécifiques en
XHTML ou en
ASP).
Les produits, Les FAQ's spécifiques aux quatres gammes et spécifiques aux produits sont entièrement actualisables. Encore une fois, les visuels sont uploadés et supprimés automatiquement, l'utilisateur n'a pas à s'en soucier.
Ci-contre, une capture d'écran de l'interface d'administration du site (cliquez sur l'image pour agrandir).
Les produits, Les FAQ's spécifiques aux quatres gammes et spécifiques aux produits sont entièrement actualisables. Encore une fois, les visuels sont uploadés et supprimés automatiquement, l'utilisateur n'a pas à s'en soucier.
Ci-contre, une capture d'écran de l'interface d'administration du site (cliquez sur l'image pour agrandir).
Atom design
Cette fois, le but était de faire le journal en ligne de mon ancien groupe de projet : Atom Design.
Les graphistes voulaient faire quelque chose de joli, les codeurs voulaient s'amuser en peu, et le chef de projet voulait quelque chose de pratique, et tant qu'à faire convivial !
Pour faire simple, j'ai décidé de faire un petit système de gestion des news via des fichiers textes : un fichier est créé pour chaque journée, et une "moulinette" en PHP les liste et affiche leur contenu.
Le principal avantage de ce système est qu'il n'utilise pas de base de données de type mysql, ces dernières avaient (ont encore ?) tendance à planter souvent chez l'hébergeur que nous ne citerons pas ici...
Ci-contre, deux captures d'écran du site (cliquez sur les images pour agrandir).
Les graphistes voulaient faire quelque chose de joli, les codeurs voulaient s'amuser en peu, et le chef de projet voulait quelque chose de pratique, et tant qu'à faire convivial !
Pour faire simple, j'ai décidé de faire un petit système de gestion des news via des fichiers textes : un fichier est créé pour chaque journée, et une "moulinette" en PHP les liste et affiche leur contenu.
Le principal avantage de ce système est qu'il n'utilise pas de base de données de type mysql, ces dernières avaient (ont encore ?) tendance à planter souvent chez l'hébergeur que nous ne citerons pas ici...
Ci-contre, deux captures d'écran du site (cliquez sur les images pour agrandir).
Ce site est la propriété d'Hoffmann Nicolas. Tous droits de reproduction interdits.