#Startup : Méthode pour développer son propre site Web !

1. 1. Modéliser son idée
2. 2. Choisir une techno
3. 4. Faire quelque chose de beau
4. 5. Make it fancy : l’ajout du JavaScript

Faut-il s’appeler Mark Zuckerberg pour développer son propre site Web ? Faut-il avoir un an devant soi pour se lancer ? Il existe aujourd’hui plus de 670 millions de sites dans le monde. Alors pourquoi ne pas essayer de développer le vôtre? Voilà une recette en 5 étapes.

1. Modéliser son idée

modéliser son idée

Vous avez une idée de site. Quelque chose de nouveau, d’innovant, ou simplement un concept que vous avez découvert à l’étranger. Avant de vous lancer dans le développement, une phase de conception et de modélisation vous attend.

Cette phase est cruciale car vous y élaborez toute l’architecture de votre site. Vous y définissez les actions possibles, les interactions entre les utilisateurs, les propriétés que doivent avoir les objets présents sur votre site.

En résumé, vous structurez votre idée et définissez le cahier des charges précis de votre produit. Il est vital de passer un maximum de temps sur cette phase de conception : toute la performance et l’ergonomie du site à venir est en jeu !

2. Choisir une techno

Une fois votre idée détaillée sur le papier, il est temps de vous plonger dans… le CODE ! Un choix s’impose alors : celui du langage de programmation et de la technologie qui vient avec.

Ce choix est primordial dans le développement d’un site. On ne change pas du jour au lendemain de techno ! A titre de comparaison, choisir une techno revient au choix du moteur lorsqu’on achète une nouvelle voiture. Pour vous donner quelques exemples, on peut citer:

• PHP (ex : Facebook) est la techno la plus mature, la plus utilisée. Mais elle commence à se faire vieillissante et il n’est pas recommandé de se lancer dans un projet en PHP aujourd’hui.
• Ruby on Rails (ex : Twitter) est une techno rapide à mettre en place et très bien documentée. Elle n’est toutefois pas très performante pour la manipulation d’un grand nombre de données.
• Node JS (ex : LinkedIn), au contraire, est bien adapté pour supporter de grosses audiences mais n’est pas aussi mature que les technos précédentes.

3. Libérer le Kraken

Vous avez maintenant construit votre site. Les principales fonctionnalités sont présentes. On peut s’inscrire, communiquer aves les autres utilisateurs, effectuer tout un tas d’actions… Il est maintenant temps de le déployer sur Internet !

Libérer le kraken

Imaginez : cela fait des semaines que vous êtes sur cette maquette de bateau et aujourd’hui vous vous décidez à voir si elle flotte vraiment ! Ou encore, vous vous entrainez depuis toujours sur votre vélo d’appartement et demain vous prenez la route pour le Tour de France !

Et bien déployer son site sur Internet peut réserver bien des surprises et des difficultés imprévues. Tout d’abord, il faut choisir ses serveurs. A moins que vous ne décidiez d’avoir le vôtre et de risquer de transformer votre bureau en salle des machines (cf image), la solution que nous recommandons est d’utiliser Amazon Web Service. Toute la mécanique de votre site sera exportée dans le Cloud et toutes vos données seront précieusement stockées en plusieurs exemplaires, dans plusieurs endroits du monde !

Le temps de la phase de déploiement n’est pas à négliger. Certains aménagements seront à fournir (comme changer de base de données) avant que tout marche comme prévu…

4. Faire quelque chose de beau

Faire du beau !

Nous n’avons pas encore abordé la question du visuel de votre site. Vous avez peut-être déjà entendu parler du CSS : c’est le langage (encore un !) qui sert à programmer l’aspect visuel de votre projet. Définir une trame graphique, choisir une architecture visuelle pour chaque page Web, puis la mettre en œuvre peut s’avérer extrêmement chronophage…

C’est pourquoi Twitter a généreusement mis à disposition des développeurs une librairie qui s’appelle Bootstrap. Cette librairie propose des éléments graphiques en « kits » : des formulaires d’inscription, des tableaux de données, parfois même des animations toutes faites ! Et tout est personnalisable : couleurs, polices, taille des boutons, etc. Pour continuer à prendre des images, Bootstrap fournit au peintre une palette complète de couleurs. L’alternative étant de ne disposer que de trois couleurs pour peindre une toile, et de refaire les mélanges à chaque fois !

5. Make it fancy : l’ajout du JavaScript

Récapitulons : vous avez une idée brillante bien modélisée, une technologie puissante, votre site est sur le Web et vous disposez d’une palette d’éléments visuels pour rendre le tout agréable et facile d’utilisation. Le résultat reste toutefois un peu statique et manque d’animations. C’est précisément le rôle de la dernière couche : le JavaScript.

La plupart des animations que vous trouverez sur les sites Web sont programmées en JavaScript. Lorsque vous approchez la souris d’un bouton et que celui-ci change de couleur ; lorsqu’une photo s’agrandit sans que vous ayez cliqué ; lorsque vous atteignez la fin de votre feed Facebook mais que celui-ci semble infini : et bien, c’est du JavaScript ! Tout à fait indispensable si vous souhaitez que votre site ait l’air vivant et dynamique.

 Article invité rédigé par Jordane Giuly, ingénieur entrepreneur, co-fondateur de @rebble_it, passionné de musique, de sciences et de nouvelles technologies.