Site multilingue (5 langues) avec contenu dynamique entièrement personnalisable, formulaire de contact et intégration GoogleMap.

Page de présentation de l’école avec illustration interactive.

Vente de photos en ligne.

Référencement naturel (optimisation SEO).

Accueil

Présentation de l’école

Page Kiwi Surf Festival

Développement sur une base de Wordpress et WP E Commerce (largement customisé), intégration à partir du design graphique réalisée par Mostardesign.

Page d’accueil du site officiel du Crou

Le StuperMarché, boutique du Crou :

Panier du StuperMarché :

Contact :

Tout d’abord, quelques news pour ceux qui se demanderaient : je travaille toujours à F2X, où je poursuis les évolutions sur un (très gros) projet symfony, le progiciel LogicAuto et ses multiples front-end. L’occasion pour moi d’abandonner les développements CMS pour me consacrer à un framework, et de raviver/améliorer mes connaissances en PHP.

Sinon, j’ai aussi quelques beaux projets dans les cartons, et si la plupart sont top secret pour le moment, le plus important pour toi, qui fait partie de mes 10 fidèles lecteurs, c’est une nouvelle itération de mon site portfolio.

Les nouveautés ? Forcément un nouveau graphisme, bien plus épuré… Et cette fois-ci, j’ose enfin me confronter au blanc… On verra le résultat… L’autre grand changement est le nom de domaine qui sera totalement nouveau… J’abandonne l’extension .net, le tiret, et je pars sur une base vierge ce qui sera l’occasion de m’amuser un peu sur la SEO.

Pour le contenu, je souhaite recentrer la visibilité de mes travaux, et mieux sélectionner ceux qui ont le plus d’impact.

Niveau blog, je dois encore y réfléchir mais il sera beaucoup moins en avant… D’abord, cela consomme trop de temps… Et surtout, je ne veux pas tomber dans une redite de ce que j’ai pu lire (tomber dans l’echo chamber), ni dans une espèce de rédaction impersonnelle…

Bref, du nouveau bientot…

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, référencement naturel (optimisation SEO)

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