3 mois de développement m’ont été nécessaires à la mise en ligne de la toute dernière version du site d’Offensive Studio. Cela explique mon absence sur mon site même.. Sorry! Mais voilà il est là, et ce que vous pouvez voir, n’est pas tout! Voici l’histoire de mon travail :

Tout d’abord Offensive Studio est une agence de création de projets WEB/PRINT/3D créé par Maxime Baqué située à Bruges (la ville de France dans la périphérie de Bordeaux, pas celle de Belgique spécialisée dans le chocolat…). Beaucoup la voie comme une grosse agence (il est souvent arrivé que des clients en rendez-vous soient surpris du nombre d’employés) vu le nombre conséquent de clients/projets référencés mais ce n’est (pour l’instant ?) pas le cas! Bref, cette agence s’est spécialisée essentiellement dans la création et la gestion de sites web pour petites et moyennes entreprises dans les alentours (chai d’Oc, Pigeon, 7ème Péché, Aquipierre, ICE Room…), puis produit de nombreuses affiches PRINT, vidéos, images d’architectures/animations 3D…

J’ai eu la chance d’être recruté en tant que Développeur Stagiaire (je rappelle que je suis encore Étudiant à l’heure actuelle en Master2 WEB @ estei, la formation demande un stage de 6 mois en Entreprise pour valider une grande partie du Master), il semblerait qu’il y ait du boulot! D’où celui-ci : La mise en place d’un tout nouveau site web de l’agence, intégrant un espace client et un backoffice tout neuf. La particularité : 100% HTML5, 100% CSS3, 100% JQuery, 50% Ajax (et 0% Flash), de plus : un site flexible et une administration complète.

Fort heureusement, tout le design du site et de l’espace client a été conçue par Maxime Baqué, le projet a donc été d’une part de développer le site (plus précisément développer l’administration* avant toute chose  puis le site), d’intégrer toute l’interface, et enfin (re)développer encore et encore!

Petit tour d’horizon sur le développement en étape

• Configuration d’un réseau PHP en local, tout est presque fait sur MAC OS X 10.7.4! Mais pas MySQL…
• Le choix de l’utilisation d’un Framework PHP : Symfony2 (pour un projet d’envergure, surtout pour le backoffice, c’est conseillé)
• Une revue des Bundles/Plugins existant et pouvant nous faire gagner du temps :
  • FOSUserBundle : Création et gestion de comptes utilisateurs, ça sera utile pour la connexion sécurisée à l’admin et l’espace client
  • SonatadminBundle : Après mûre réflexion, même si ce bundle permet d’afficher facilement les tables SQL pour créer une administration rapidement, j’ai préféré partir de ZÉRO et créer un backoffice plus adapté.
• Le développement du backoffice en priorité, puis l’espace client (partie rapide de développement) et enfin le site.

Détails des différentes Parties du Projets

Le développement du site FrontOffice. Beaucoup de choses ont étés développés pour allier rapidité et confort :

• Chaque page affiche une image de background qui s’adapte automatiquement aux dimensions du navigateur ou de la tablette.
• Toutes la section du Blog est consultable rapidement et sans rechargement de la page avec la technologie AJAX et différentes propriétés Javascript. Mais pour le référencement, tous les liens vers les articles, catégories sont consultables. Intéressé par cette technique? Allez voir la propriété history.pushState() et un exemple de site-web qui permet de naviguer rapidement sans rechargement dans les pages, vous pourrez aussi allez en arrière et revenir en avant avec la gestion de l’historique.
• Les sous-rubriques (exemple: la page de Compétences) utilisent la même technique que celle du blog. On peut ainsi « switcher » les éléments d’une sous rubrique à l’autre sans rechargement en cliquant sur les boutons suivant/précédent ou en utilisant les flèches du clavier.
• Le Portfolio est plus complexe. Selon la taille de l’écran elle affiche un nombre limité de projets qu’elle adapte à la largeur. Sur un iPad 2 elle peut afficher 16 projets, sur un écran de 1600×900 : 30. Une visionneuse charge les photos et vidéos d’un projet en AJAX.
• Le reste des pages peuvent contenir des formulaires (contacts et recrutements) ou avoir 1 ou 2 blocs de contenu HTML administrable.
• Le site s’adapte à la taille de l’écran/navigateur (largeur minimum de 1000px). Ainsi le site s’adapte pleinement sur une tablette (testé sur iPad), quelques bugs sur les tablettes Android, une version pour smartphone sera développée afin de naviguer facilement entre les menus qui sont pas du tout adaptés pour les petits écrans;

Le développement de la partie Espace client : le client peut se connecter, modifier ses informations personnelles, consulter devis/factures/contrats et télécharger des fichiers que l’agence lui envoie. L’espace client facilite aussi les communications entre le client et l’agence grâce à un formulaire de contact direct.

La création du Backoffice OSADMIN (= Offensive Studio Administration puisqu’il a un petit nom) où l’on peut gérer des utilisateurs (modérateurs…) et des clients (pour se connecter à l’espace client), gérer des pages, ajouter des actualités à un blog et créer des portfolio. Caractéristique importante : un Dashboard et une page de configuration générale.