Menu

Slide

Pour ce projet, j’ai intégré la charte fournie par Mostardesign dans Wordpress avec une grosse touche de jQuery pour l’intéractivité. Le projet avait pour but de fournir un site conforme aux standards et permettant une administration et une évolution plus aisées. Au niveau de l’interface utilisateur, les contraintes étaient d’offrir des effets visuels améliorant l’expérience utilisateur et mettant en valeur le contenu tout en restant accessible, à l’image du mur d’images en accueil permettant de surfer rapidement au milieu des différents projets.

Voici quelques screens, mais le mieux est encore d’aller visiter le site en lui-même !

Accueil

Le mur d’images

Page About

Page contact

Fiche technique

• wordpress avec plugins google sitemap generator, wp-security scan, wpseo, php speedy php, maintenance mode
• jquery 1.3 avec plugins form, validate, scrollTo, jquery UI, supersized2.0
• valide xhtml & css, compatible tous navigateurs

Wordpress : dans sa branche 2.7

Thème : Entièrement custom, anti-pixel v3

Google XML Sitemaps : Permet de générer automatiquement à la volée le sitemap.xml du site (plein d’options, affichage avec feuille xsl, etc)

Php Speedy WP : Gère l’agrégation et la minification des feuilles de style et du javascript. J’ai modifié un petit peu ce plugin pour que l’insertion des fichiers javascript se fasse en pied de page (recommandation ySlow) et pour que le minification soit effectuée avec MyMin.php plutôt qu’avec JSMin.php.

WP Security : Pas indispensable, mais quelques outils/conseils pour améliorer un peu la sécurité

wpSeo (ancienne version) : Pratique, il permet de définir des modèles pour générer dynamiquement les meta keywords et description. On peut ensuite les modifier pour un article précis.

jQuery et ses plugins

jQuery v1.3 : mon framework javascript préféré

SerialScroll : Pour les animations scroll

Scrollto : Idem

LocalScroll : Animation scroll à partir des ancres

Easing : Pour plus d’options dans les animations

PrettyPhoto : Effet lightbox

jquery Validate : Validation des formulaires

jQuery Form : Formulaire en ajax par amélioration progressive

blockUI : Permet de bloquer l’interface ou un élement de la page

Autres

swfobject : pour insérer du flash proprement.

animation de netdisaster.com (merci à eux) : pour agrémenter ma page 404.

reset.css : pour partir sur de bonnes bases…

Principales sources d’inspiration pour cette nouvelle version…

Abduzeedo

Studio7Designs

PsdTuts

Elite By Design

Fubiz

(Moins évident, mais l’inspiration est surtout sur les intéractions)

Ressources :

Background

J’ai utilisé une prod réalisée grâce à un tutorial d’Abduzeedo pour faire le background.

Icones

J’ai utilisé le pack d’icones proposé par Function.

Typo

Polices non web

Polices web

Contenu : « font-family:arial,sans-serif; »

Headlines : « font-family:« segoe ui »,arial,sans-serif; »

Tests & Maquettes

Test 1

Test 2

Test 3

Maquette finale

Accueil du site de l’Antidote

Actualités

Contact

Fiche produit

Contact

Note 1 : Ce projet a été réalisé pour l’agence rezo21.

Note 2 : Ce projet a été repris par un prestataire extérieur, je n’en suis donc plus le responsable.

Slide + Photos :

Slide photos :

Formulaire de contact :

Changement de technologie (ASP vers PHP5) et refactoring du code (transition de pseudo-objet vers tout objet avec couche d’abstraction de données).

Développement PHP 5 tout objet, xhtml/css, javascript, xml/xsl, base de données PostgreSQL.

Ajout de nouvelles fonctionnalités (exemple : modules de statistiques).

Interface de gestion des articles :

Interface de consultation des statistiques :

Note 1 : Ce projet a été réalisé pour l’agence IRCF.

Note 2 : Merci beaucoup à Mathieu pour son aide (et bien plus) !

Note 3 : Le projet a continué d’évoluer (sans moi !) et est maintenant en v3.