Pré-requis pour la réalisation de ce prototype : aucun.

Lorsqu’on démarre une activité ou lorsqu’on lance un projet, une des préoccupations majeures est la communication. Si les réseaux sociaux sont un excellent canal de communication – quand on sait s’en servir – le site vitrine (ou institutionnel) reste un incontournable.

Je préfère être clair dès maintenant : ce n’est pas en lisant cet article que vous pourrez concurrencer les agences de développement dont c’est le métier. Mais un beau petit site web structuré et responsive (expérience de consultation adaptée aux différentes gammes d’appareils : téléphone mobile, tablette, ordinateur de bureau) peut largement suffire pour débuter.

Trêve de bavardage, passons tout de suite au prototypage.

Pour le prototypage de notre site vitrine, nous avons utilisé un framework qui se nomme Bootstrap. Je ne vous présenterai pas le framework dans cet article ; de nombreuses ressources sont disponibles sur le web pour aller plus loin. Le principal avantage d’utiliser un framework comme Bootstrap est que cela va réduire considérablement le temps de développement : je me suis engagé sur une quinzaine de minutes,  j’ai à cœur de les tenir.

J’ai donc développé spécialement pour vous un site web « one page » que vous pourrez, je l’espère, facilement adapter à votre projet.

Pour visiter ce site, rendez vous sur ce lien : http://xp.frugalprototype.com/vitrine/

Vous trouverez, ci-dessous, le lien pour télécharger le dossier contenant l’ensemble des fichiers du site internet en exemple.

Télécharger le site vitrine Frugal.

A l’intérieur de ce dossier nous trouvons :

  • Un fichier « index.html » : c’est tout simplement la page principale de notre site, dans laquelle nous allons retrouver le contenu du site. C’est aussi dans ce fichier que nous faisons référence aux autres fichiers du site « design.css » et « scroll.js ».
  • Un dossier nommé « css » dans lequel se trouve le fichier « design.css » : c’est le fichier dans lequel le style du site est défini : couleur de fond, couleur du texte, taille de la police, ….
  • Un dossier nommé « images » dans lequel se trouve les images utilisées sur le site.
  • Et un dossier nommé « js » dans lequel se trouve le fichier « scroll.js » (pour l’effet de défilement vertical des rubriques).

Se trouve également dans ce dossier, un fichier nommé « .htaccess » qui permet (entre autres) de cacher l’arborescence de votre site pour des raisons de sécurité.

Dans chacun de ces fichiers, des commentaires vous expliquent comment modifier le site et remplacer le contenu du site par le vôtre. Vous pouvez éditer ces fichier avec un simple éditeur de texte toutefois je vous conseille d’utiliser un éditeur comme Notepad++.

Avant de vous laisser, voici quelques ressources libres pour vous aider à adapter le site :

Si des erreurs se sont glissées dans l’article ou dans le code, n’hésitez pas à nous en faire part.

Merci, et à très bientôt sur Frugal Prototype