le nouveau site d’Offensive Studio est en ligne

Posted par le mai 20, 2012 | 2 commentaires


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.

2 Commentaires

  1. Salutation =), Il faut que je fasse faire une brochure pour ma société mais c’est un domaine trop flou pour moi. Des amis ont travaillé avec profil design( Leur site) et me conseille particulierelent cette agence. Sur leur site je ne vois pas leur réalisation donc ça me rassurerais d’ avoir votre opinion pour poser les bonnes question si je les appels. Ce domaine m’étant encore inconnu est ce qu’il y a des pièges à éviter ? j’avoue que c’est encore vague pour moi et cela a un coût ça serait cool de pas gaspiller d’argent. Merci d’avance =)

    Poster une réponse
    • Bonjour. Il y a beaucoup d’agence de communication, cette agence a de gros clients mais on ne voit que leurs réalisation de sites web, ce doit être en général leur domaine de compétence.

      Quelle sorte de brochure souhaitez-vous ? Une brochure de type plaque tarifaire ? Une brochure de présentation des domaines de compétences de votre entreprise ou encore d’un domaine en particulier ? Vous disposez de beaucoup de visuels (photos, logos) ? Souhaitez vous que cette brochure ressemble à la charte graphique du logo de votre entreprise ou de son site web ? Ces questions peuvent m’aider à comprendre ce que vous voulez.

      Sinon, concernant les questions types c’est assez difficile, mais généralement une agence sérieuse et compétente VOUS demandera des questions :
      – Quel type de brochure voulez-vous ? (type, format, etc)
      – Avez-vous déjà à disposition des fichiers sources qui seront dans vos brochures ? (photos professionnelle, logo de votre entreprise au format vectoriel…)
      – Les extras : Vous souhaitez diversifier votre brochure ? (différents formats, panneau de présentation qui reprend le style graphique de la brochure, éléments pour le WEB de votre brochure comme des bandeaux publicitaires ou des images reprenant votre brochure…)

      J’oublie bien des questions qu’ils peuvent vous poser, mais s’ils en pose c’est qu’ils ont les compétences. Mais n’oubliez pas :
      – Prenez rendez-vous, allez les voirs et s’ils peuvent vous montrer leurs travaux en print c’est un +
      – Proposez vous différentes qualités de papiers (feuille simple, couche plastifiée, cartonnée, différents effets…) le prix ne devrait varier qu’au niveau de l’impression
      – Disposez-vous des sources au final (les fichiers Adobe photoshop/Illustrator de vos brochure, ou un pdf non bridé de vos brochure, ou autre encore) en plus des brochures papiers.
      – le devis est il gratuit ?
      – Faut il contacter un imprimeur, ou est ce que vous êtes vous-même l’imprimeur, ou tout simplement est ce que vous gérer l’impression. (les prixs de l’impression varient beaucoup d’une société à l’autre)

      Poster une réponse

Envoyer un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>